<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>XRay - Responsive Bootstrap 4 Admin Dashboard Template</title>
    <!-- Favicon -->
    <link rel="shortcut icon" th:href="@{/xray/images/favicon.ico}" />
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" th:href="@{/xray/css/bootstrap.min.css}">
    <!-- Typography CSS -->
    <link rel="stylesheet" th:href="@{/xray/css/typography.css}">
    <!-- Style CSS -->
    <link rel="stylesheet" th:href="@{/xray/css/style.css}">
    <!-- Responsive CSS -->
    <link rel="stylesheet" th:href="@{/xray/css/responsive.css}">

    <style>
        .my-mouse-img {
            position: absolute;
            z-index: 999;
        }
    </style>
</head>
<body>
<img class="my-mouse-img" src="imgs/mouse-logo.jpg" alt="" width="60px">
<script>
    document.addEventListener('mousemove', function (e) {
        //鼠标只要移动,就会触发事件
        var x = e.pageX;
        var y = e.pageY;
        var pic = document.querySelector('img');
        pic.style.left = x-20+'px';
        pic.style.top = y-40+'px';
    })
</script>

<!-- loader Start -->
<div id="loading">
    <div id="loading-center">
    </div>
</div>
<!-- loader END -->
<!-- Sign in Start -->
<section class="sign-in-page">
    <div class="container sign-in-page-bg mt-5 p-0">
        <div class="row no-gutters">
            <div class="col-md-6 text-center">
                <div class="sign-in-detail text-white">
                    <a class="sign-in-logo mb-5" href="#"><img th:src="@{/xray/images/logo-white.png}" class="img-fluid"></a>
                    <div class="owl-carousel" data-autoplay="true" data-loop="true" data-nav="false" data-dots="true" data-items="1" data-items-laptop="1" data-items-tab="1" data-items-mobile="1" data-items-mobile-sm="1" data-margin="0">
                        <div class="item">
                            <img th:src="@{/xray/images/login/1.png}" class="img-fluid mb-4" alt="logo">
                            <h4 class="mb-1 text-white">欢迎登陆</h4>
                            <p>欢迎来到教育局民办教育信息服务监督平台</p>
                        </div>
                        <div class="item">
                            <img th:src="@{/xray/images/login/2.png}" class="img-fluid mb-4" alt="logo">
                            <h4 class="mb-1 text-white">欢迎登陆</h4>
                            <p>欢迎来到教育局民办教育信息服务监督平台</p>
                        </div>
                        <div class="item">
                            <img th:src="@{/xray/images/login/3.png}" class="img-fluid mb-4" alt="logo">
                            <h4 class="mb-1 text-white">欢迎登陆</h4>
                            <p>欢迎来到教育局民办教育信息服务监督平台</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 position-relative">
                <div class="sign-in-from">
                    <h1 class="mb-0">找回密码</h1>
                    <p>请输入您的密保问题答案</p>
                    <form class="mt-4" th:action="@{/backPassword}">
                        <div class="form-group">
                            <label >用户名</label>
                            <input type="text" class="form-control mb-0" name="username" th:value="${name}" readonly="readonly">
                        </div>
                        <div class="form-group">
                            <label >密保问题</label>
                            <input type="text" class="form-control mb-0" name="question" th:value="${question}" readonly="readonly">
                        </div>
                        <div class="form-group">
                            <label >密保答案</label>
                            <input type="text" class="form-control mb-0" name="answer" placeholder="密保答案">
                        </div>
                        <div class="d-inline-block w-100">
                            <button type="submit" class="btn btn-primary float-right">找回密码</button>
                        </div>
                        <div class="sign-info">
                            <span class="dark-color d-inline-block line-height-2">没有帐户？<a href="/signup">注册</a></span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Sign in END -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script th:src="@{/xray/js/jquery.min.js}"></script>
<script th:src="@{/xray/js/popper.min.js}"></script>
<script th:src="@{/xray/js/bootstrap.min.js}"></script>
<!-- Appear JavaScript -->
<script th:src="@{/xray/js/jquery.appear.js}"></script>
<!-- Countdown JavaScript -->
<script th:src="@{/xray/js/countdown.min.js}"></script>
<!-- Counterup JavaScript -->
<script th:src="@{/xray/js/waypoints.min.js}"></script>
<script th:src="@{/xray/js/jquery.counterup.min.js}"></script>
<!-- Wow JavaScript -->
<script th:src="@{/xray/js/wow.min.js}"></script>
<!-- Apexcharts JavaScript -->
<script th:src="@{/xray/js/apexcharts.js}"></script>
<!-- Slick JavaScript -->
<script th:src="@{/xray/js/slick.min.js}"></script>
<!-- Select2 JavaScript -->
<script th:src="@{/xray/js/select2.min.js}"></script>
<!-- Owl Carousel JavaScript -->
<script th:src="@{/xray/js/owl.carousel.min.js}"></script>
<!-- Magnific Popup JavaScript -->
<script th:src="@{/xray/js/jquery.magnific-popup.min.js}"></script>
<!-- Smooth Scrollbar JavaScript -->
<script th:src="@{/xray/js/smooth-scrollbar.js}"></script>
<!-- Chart Custom JavaScript -->
<script th:src="@{/xray/js/chart-custom.js}"></script>
<!-- Custom JavaScript -->
<script th:src="@{/xray/js/custom.js}"></script>
</body>
</html>